<template>
	<view class="userinfo-container">
		<view class="userInfo-card">
			<view class="avater">
				<image src="/static/default-avater.png" mode="aspectFill" class="avatar-img">
				</image>
			</view>
			<view class="">
				<view class="" style="color: #fff;">
					Hi~欢迎回家
				</view>
				<view class="info-item">
					<navigator url="/pages/login/login" open-type="redirect">
						<view>
							<view v-if="!userName" class="login-btn">
								登录
							</view>
							<view v-else>
								<text style="color: #fff;">{{userName}}</text>
								<view class="login-btn" @click="handleLogout">退出登录</view>
							</view>
						</view>
					</navigator>
				</view>

				<view class="">

				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				userName: '',
			}
		},
		onShow() {
			// 同步
			const name = uni.getStorageSync('username');
			this.userName = name
			console.log("同步name：", name)
			console.log("同步userName：", this.userName)
			if (this.userName) {
				uni.setTabBarItem({
					index: 3,
					text: '我的'
				});
			} else {
				uni.setTabBarItem({
					index: 3,
					text: '未登录'
				});
			}
		},
		methods: {
			handleLogout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							// 1. 清除本地登录缓存
							uni.removeStorageSync('username');
							// 2. 重置用户名状态
							this.userName = '';
							// 3. 跳转到首页
							uni.switchTab({
								url: '/pages/UserInfo/UserInfo'
								// 或跳登录页：uni.redirectTo({ url: '/pages/login/login' })
							});
							// 4. 提示退出成功
							uni.showToast({
								title: '退出登录成功',
								icon: 'success',
								duration: 1500
							});
						}
					}
				});
			}

		},
	}
</script>

<style lang="scss" scoped>
	.userinfo-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-color: aquamarine;

		.login-btn {
			margin-top: 30px;
			width: 60px;
			height: 20px;
			font-size: 12px;
			background-color: whitesmoke;
			color: #333;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 10%;
		}

		.userInfo-card {
			display: flex;
			background-color: white;
			width: 100%;
			height: 150px;
			background-image: url('/static/info.png');
			/* 铺满容器，可能裁剪边缘 */
			background-size: cover;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
			padding-top: 15px;
		}

		.avater {
			margin: 0px 30rpx;

			.avatar-img {
				width: 100px;
				height: 100px;
				border-radius: 50%;
				/* 关键：cover让背景图铺满容器，裁剪超出部分 */
				background-size: cover;
				/* 居中显示，避免裁剪掉关键部分（比如人脸） */
				background-position: center center;
				/* 去掉默认的背景重复 */
				background-repeat: no-repeat;
				border: 2px solid #f0f0f0;
			}
		}


		.info-item {
			height: 50px;
		}
	}
</style>